<template>
	<view class="container">
		<custom-navbar title="收藏"></custom-navbar>
		
		<view class="main-content" :style="{paddingTop: navbarTotalHeight + 'px'}">
			<view class="empty-state">
				<image class="empty-icon" src="https://img.icons8.com/fluency/48/bookmark.png" mode="aspectFit"></image>
				<text class="empty-text">暂无收藏内容</text>
				<text class="empty-desc">快去收藏你喜欢的影视资源吧</text>
			</view>
		</view>
	</view>
</template>

<script>
import CustomNavbar from '@/components/custom-navbar/custom-navbar.vue';

export default {
	components: {
		CustomNavbar
	},
	data() {
		return {
			navbarTotalHeight: 132,
			statusBarHeight: 44
		}
	},
	mounted() {
		const systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight || 44;
		this.navbarTotalHeight = this.statusBarHeight + 44;
	}
}
</script>

<style>
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
}

.main-content {
	padding: 40rpx;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 400rpx;
}

.empty-icon {
	width: 120rpx;
	height: 120rpx;
	margin-bottom: 30rpx;
	opacity: 0.6;
}

.empty-text {
	font-size: 32rpx;
	color: #666;
	margin-bottom: 20rpx;
}

.empty-desc {
	font-size: 28rpx;
	color: #999;
}
</style>